<template>
  <el-card>
   
      <div class="img-grid">
      <!-- 上传按钮 -->
      <div class="img-box upload" @click="openDialog">
        <el-icon><Plus /></el-icon>
        <span>上传图片</span>
      </div>

      <!-- 图片列表 -->
      <div v-for="(item, index) in imgList" :key="index" class="img-box">
        <el-image :src="item.url" fit="cover"></el-image>
        <el-icon class="del-icon" @click="delImg(index)"><Delete /></el-icon>
        <div class="view-icon" @click="viewImg(index)">
          <el-icon><View /></el-icon>
        </div>
      </div>
    </div>

    <!-- 选择图片对话框 -->
    <el-dialog v-model="dialogVisible" title="选择图片" width="1000px" destroy-on-close>
      <manage :flag="1" @selectImage="selectImg" />
    </el-dialog>

    <!-- 图片预览组件 -->
    <el-image-viewer 
      v-if="previewVisible" 
      :url-list="getUrls()" 
      :initial-index="currentIndex"
      @close="previewVisible = false"/>
      
   
   
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Plus, Delete, View, PictureRounded } from '@element-plus/icons-vue'
import manage from "@/views/basis/manage.vue"

// 状态数据
const dialogVisible = ref(false)
const imgList = ref<Array<{ url: string }>>([])
const previewVisible = ref(false)
const currentIndex = ref(0)

// 打开选择对话框
const openDialog = () => dialogVisible.value = true

// 选择图片
const selectImg = (url: string) => {
  dialogVisible.value = false
  imgList.value.push({ url })
}

// 删除图片
const delImg = (index: number) => imgList.value.splice(index, 1)

// 预览图片
const viewImg = (index: number) => {
  currentIndex.value = index
  previewVisible.value = true
}

// 获取URL列表
const getUrls = () => imgList.value.map(item => item.url)
</script>

<style scoped>
.img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}

.img-box {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.img-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 上传按钮样式 */
.upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  color: #909399;
}

.upload:hover {
  border-color: #409eff;
  color: #409eff;
}

.upload .el-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

/* 删除图标 */
.del-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px;
  border-radius: 50%;
  color: #f56c6c;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
  z-index: 1;
}

/* 预览图标 */
.view-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px;
  border-radius: 50%;
  color: #409eff;
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
  z-index: 1;
}

/* 鼠标悬浮显示图标 */
.img-box:hover .del-icon,
.img-box:hover .view-icon {
  opacity: 1;
}
</style>